<template>
  <div>
    <img src="../../assets/logo.png">
    <div class="login-wrap" v-show="showLogin">
      <h3>登录</h3>
      <p v-show="showTishi">{{tishi}}</p>
      <input type="text" placeholder="请输入用户名" v-model="username">
      <input type="password" placeholder="请输入密码" v-model="password">
      <button v-on:click="login">登录</button>
      <span>没有账号？马上注册</span>
    </div>

  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: "login",
    data() {
      return {
        showLogin: true,
        showRegister: false,
        showTishi: false,
        tishi: '',
        username: '',
        password: '',
        newUsername: '',
        newPassword: ''
      }
    },
    methods: {
      login() {
        // axios.get('/api/login/test.html')
        //   .then(function(response){
        //     console.log(response);
        //   })
        //   .catch(function(err){
        //     console.log(err);
        //   });

        axios.post('/api/login/login_new.html',{
          username: this.username,
          password: this.password
        })
          .then((res) => {
            res = res.data
            if (res.code > 0) {
              localStorage.setItem('token', res.data.token)
              this.$router.push('/emp')
            } else {
              this.showTishi = true
              this.tishi = res.msg
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      login1() {
        let data = {username: this.username, pwd: this.password}
        this.$http.post('http://localhost/xunfei/xf_service/login.php', data)
          .then(res => {
            res = res.body
            if (res.code > 0) {
              this.$router.push('/')
            } else {
              this.showTishi = true
              this.tishi = res.message
            }
          }, res => {
            console.log(res)
          });
      }
    }
  }
</script>

<style scoped>
  .login-wrap {
    text-align: center;
  }

  input {
    display: block;
    width: 250px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    margin-bottom: 10px;
    outline: none;
    border: 1px solid #888;
    padding: 10px;
    box-sizing: border-box;
  }

  p {
    color: red;
  }

  button {
    display: block;
    width: 250px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    border: none;
    background-color: #41b883;
    color: #fff;
    font-size: 16px;
    margin-bottom: 5px;
  }

  span {
    cursor: pointer;
  }

  span:hover {
    color: #41b883;
  }
</style>
